<script setup lang="ts">
  import { ref, reactive, watch, computed } from 'vue';
  import { TableRowSelection, Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import {
    getName,
    getUserJob,
    getUserUnits,
    getUserUnitsNumber,
  } from '@/utils/auth';
  import {
    selectDeliverPlanStandard,
    standardReturnSave,
  } from '@/api/material-receipt';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const showDrawer = ref<boolean>(false);
  const columns: any[] = [
    {
      title: '交接单号',
      dataIndex: 'deliveryPlanCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
    },
    {
      title: '物料名称',
      dataIndex: 'mdsItemDTOList[0].itemName',
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '合格证号',
      dataIndex: 'supplyRegularNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送数量',
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '最大可退数量',
      dataIndex: 'maxQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '当前可用数量',
      dataIndex: 'usableQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '机型',
      dataIndex: 'productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '起始架次',
      dataIndex: 'startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '截止架次',
      dataIndex: 'endLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '接收日期',
      dataIndex: 'receiveDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '接收单位',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '接收人',
      dataIndex: 'receiveEmpCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '接收备注',
      dataIndex: 'receiveRemark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送数量',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送日期',
      dataIndex: 'deliveryDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送单位',
      dataIndex: 'deliveryDeptId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送人',
      dataIndex: 'deliveryUserId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '移交方意见',
      dataIndex: 'deliveryNote',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '单机数',
      dataIndex: 'itemPlaneQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '计量单位',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '牌号',
      dataIndex: 'marque',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '规格',
      dataIndex: 'specs',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '父件图号',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '成品型号',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '父件型号',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'AO代码',
      dataIndex: 'aoNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用机型',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用批次',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用架次',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用说明',
      dataIndex: 'zanwu',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '油封期',
      dataIndex: 'sealDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '最长保管期',
      dataIndex: 'maxStorageDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接ID',
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  const localTableData = ref<any[]>([]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);

  const batchNo = ref<string>('');
  const productCode = ref<string>('');
  const startLotNo = ref<string>('');
  const endLotNo = ref<string>('');

  const aoNo = ref<string>('');
  const itemCode = ref<string>('');
  const qualityCode = ref<string>('');
  const deliveryPlanCode = ref<string>('');

  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNumber = ref<number>(1);
  const pageSize = ref<number>(10);

  // 退库单信息
  const returnType = ref<string>('');
  const usableQty = ref<string>('');
  const returnBasis = ref<string>('');
  const belongCompany = ref<string>('');

  const faultPhenomenon = ref<string>('');
  const appearanceStatus = ref<string>('');
  const supportingStatus = ref<string>('');
  const MaxStoragePeriod = ref<string>('');

  const oilSealPeriod = ref<string>('');
  const remark = ref<string>('');
  const value5 = ref<string>('是');

  const flowQueryData = ref({
    searchParams: computed(() => ({
      aoNo: aoNo.value,
      batchNo: batchNo.value,
      deliveryOrgCode: '',
      deliveryPlanCode: deliveryPlanCode.value,
      deliveryStatus: '',
      deliveryType: '',
      endLotNo: endLotNo.value,
      itemCode: itemCode.value,
      productCode: productCode.value,
      qualityCode: qualityCode.value,
      receiveOrgCode: '',
      startLotNo: startLotNo.value,
    })),
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
  });

  async function search() {
    const data = await selectDeliverPlanStandard(flowQueryData.value);
    localTableData.value = data?.retData || [];
    total.value = data?.totalCount || 0;
  }

  function reset() {
    batchNo.value = '';
    productCode.value = '';
    startLotNo.value = '';
    endLotNo.value = '';

    aoNo.value = '';
    itemCode.value = '';
    qualityCode.value = '';
    deliveryPlanCode.value = '';
    // search();
  }
  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (!newValue) {
        showDrawer.value = newValue;
        localTableData.value = [];
        total.value = 0;
        return;
      }
      if (booleanStore.num === 4) {
        showDrawer.value = newValue;
        // search();
        reset();
        returnType.value = '';
        usableQty.value = '';
        returnBasis.value = '';
        belongCompany.value = '';
        faultPhenomenon.value = '';
        appearanceStatus.value = '';
        supportingStatus.value = '';
        MaxStoragePeriod.value = '';
        oilSealPeriod.value = '';
        remark.value = '';
        value5.value = '是';
        localTableData.value = [];
        selectedKeys.value = [];
      }
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(4);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool(4);
  }
  async function handleOk() {
    const selectedData: any[] = localTableData.value.filter((item: any) =>
      selectedKeys.value.includes(item.wmsDeliveryPlanId)
    );
    // if (selectedData.length !== 1) {
    //   Notification.warning({
    //     title: '提示',
    //     content: '请只选择一条数据',
    //     closable: true,
    //   });
    //   return;
    // }
    const account: any = getName() || '';
    const empinfoid: any = getUserJob() || '';
    const text: any = getUserUnits() || '';
    const departid: any = getUserUnitsNumber() || '';

    const info = {
      account: account.value,
      empinfoid: empinfoid.value,
      text: text.value,
      departid: departid.value,
      itemCode: selectedData[0].itemCode,
      wmsDeliveryPlanId: selectedData[0].wmsDeliveryPlanId,
      returnType: returnType.value || '1',
      returnQty: usableQty.value,
      accordingNo: returnBasis.value,
      failureDesc: faultPhenomenon.value,
      appearanceStatus: appearanceStatus.value,
      equipStatus: supportingStatus.value,
      maxStorageDate: MaxStoragePeriod.value,
      sealDate: oilSealPeriod.value,
      remark: remark.value,
      ynWorkLineFlag: value5.value,
      returnListForm: [],
      prOrderMidTable: selectedData,
    };
    const data: any = await standardReturnSave(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.retMsg,
        closable: true,
      });
      booleanStore.toggleBool(4);
      booleanStore.watchUpdate(7);
    } else {
      Notification.error({
        title: '失败',
        content: data.retMsg,
        closable: true,
      });
    }
    
  }
  function change(e: any) {
    pageNumber.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  watch([pageNumber, pageSize], () => {
    search();
  });
  watch(
    selectedKeys,
    () => {
      const selectedData: any[] = localTableData.value.filter((item) =>
        selectedKeys.value.includes(item.wmsDeliveryPlanId)
      );
      usableQty.value = selectedData[0]?.usableQty;
    },
    { deep: true }
  );
</script>

<template>
  <a-drawer
    width="70%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 标准件所在单位发起 </template>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">查询条件</div>
      </template>
      <!-- 第一行 -->
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input v-model="batchNo" placeholder="批次" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="productCode" placeholder="机型" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="startLotNo" placeholder="起始架次" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="endLotNo" placeholder="截止架次" size="large" />
          </div>
        </a-col>
      </a-row>

      <!-- 第二行 -->
      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input v-model="aoNo" placeholder="AO条码" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="itemCode" placeholder="图号" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="qualityCode"
              placeholder="质量编号"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="deliveryPlanCode"
              placeholder="交接单号"
              size="large"
            />
          </div>
        </a-col>
      </a-row>

      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <a-button type="primary" size="large" @click="search">查询</a-button>
          <a-button class="btn-reset" size="large" @click="reset"
            >重置</a-button
          >
        </a-col>
      </a-row>
    </a-card>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">交接单数据</div>
      </template>
      <a-table
        v-model:selectedKeys="selectedKeys"
        :stripe="true"
        class="top-table"
        :pagination="false"
        row-key="wmsDeliveryPlanId"
        :columns="columns"
        :data="localTableData"
        :row-selection="rowSelection"
      >
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNumber"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </a-card>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">退库单信息</div>
      </template>
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-select v-model="returnType" placeholder="退库类型" size="large">
              <a-option value="1">无故障退库</a-option>
              <a-option value="2">执行质量通知单退库</a-option>
              <a-option value="3">故障单退库</a-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="usableQty" placeholder="退库数量" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="returnBasis"
              placeholder="退库依据"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="belongCompany"
              placeholder="零件所在单位"
              size="large"
            />
          </div>
        </a-col>
      </a-row>

      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input
              v-model="faultPhenomenon"
              placeholder="故障现象"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="appearanceStatus"
              placeholder="实物外观状态"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="supportingStatus"
              placeholder="实物配套状态"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-date-picker
              v-model="MaxStoragePeriod"
              style="width: 100%"
              placeholder="最长保管期"
              size="large"
            />
          </div>
        </a-col>
      </a-row>
      <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-date-picker
              v-model="oilSealPeriod"
              style="width: 100%"
              placeholder="油封期"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="remark" placeholder="备注" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-select
              v-model="value5"
              placeholder="是否按原分工生成返修计划"
              size="large"
            >
              <a-option value="是">是否按原分工生成返修计划:是</a-option>
              <a-option value="否">是否按原分工生成返修计划:否</a-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .row-top {
    margin-top: 10px;
  }
  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
